import FullScreen from "@/utils/full-screen";
const fullScreen = new FullScreen();

const state = {
  token: localStorage.getItem('token') || '',
  open_menus: sessionStorage.getItem('open_menus') ? JSON.parse(sessionStorage.getItem('open_menus')) : [],
  isCollapse: localStorage.getItem('isCollapse') == 'true' ? true : false,
  isFullScreen: localStorage.getItem('isFullScreen') == 'true' ? true : false,
  theme: localStorage.getItem('theme') || 'light',
  lang: localStorage.getItem('lang') || 'zh-CN',
  grayscale: localStorage.getItem('grayscale') || 0
}

const mutations = {
  SET_COLLAPSE: (state, data) => {
    state.isCollapse = data
  },
  SET_FULLSCREEN: (state, data) => {
    state.isFullScreen = data
  },
  SET_THEME: (state, data) => {
    state.theme = data
  },
  // 设置语言
  SET_LANG: (state, data) => {
    state.lang = data
  },
  // 设置灰度
  SET_GRAYSCALE: (state, data) => {
    state.grayscale = data
  },
  SET_MENUS: (state, data) => {
    state.open_menus = data
  },
  OPEN_MENU: (state, data) => {
    // 判断菜单是否存在
    const index = state.open_menus.findIndex(item => item.path === data.path)
    if (index !== -1 && state.open_menus.length > 0) return
    // 添加菜单
    state.open_menus.push(data)
    // 保存到session
    sessionStorage.setItem('open_menus', JSON.stringify(state.open_menus))
  },
  CLOSE_MENU: (state, data) => {
    const index = state.open_menus.findIndex(item => item.path === data.path)
    if (index !== -1) {
      state.open_menus.splice(index, 1)
      // 保存到session
      sessionStorage.setItem('open_menus', JSON.stringify(state.open_menus))
    }
  },
  //
  SET_TOKEN: (state, data) => {
    state.token = data
  },
}

const actions = {
  setToken({ commit }, data) {
    // 保存到localStorage
    if (data) {
      localStorage.setItem('token', data)
    } else {
      localStorage.removeItem('token')
      location.reload();
      return;
    }
    commit('SET_TOKEN', data)
  },
  openMenu({ commit }, data) {
    commit('OPEN_MENU', data)
  },
  closeMenu({ commit }, data) {
    commit('CLOSE_MENU', data)
  },
  setMenus({ commit }, data) {
    commit('SET_MENUS', data)
  },
  setGrayscale({ commit }, data) {
    localStorage.setItem('grayscale', data)
    document.body.style.filter = `grayscale(${data}%)`;
    commit('SET_GRAYSCALE', data)
  },
  // 设置语言
  setLang({ commit }, data) {
    localStorage.setItem('lang', data)
    commit('SET_LANG', data)
  },
  // 设置主题
  setTheme({ commit }, data) {
    localStorage.setItem('theme', data)
    document.body.setAttribute("theme", data);
    commit('SET_THEME', data)
  },
  // 设置侧边栏展开
  setCollapse({ commit }, data) {
    localStorage.setItem('isCollapse', data)
    commit('SET_COLLAPSE', data)
  },
  // 设置全屏
  setFullScreen({ commit }, data) {
    localStorage.setItem('isFullScreen', data)
    if (data) {
      fullScreen.requestFullScreen()
    } else {
      fullScreen.exitFullscreen()
    }
    commit('SET_FULLSCREEN', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
